<template>
  <div>
    <h3>审批信息</h3>
    <zm-form inline size="small">
      <el-row :gutter="10">
        <el-col :span="8">
          <zm-form-item label="提交人员:">{{ info.sponsorName }}</zm-form-item>
        </el-col>
        <el-col :span="8">
          <zm-form-item label="所属部门:">
            {{ info.sponsorDepartmentName }}
          </zm-form-item>
        </el-col>
        <el-col :span="8">
          <zm-form-item label="提交时间:">{{ info.sponsorTime }}</zm-form-item>
        </el-col>
      </el-row>
      <!-- 审批通过 -->
      <div v-if="logData.effectNodeData && logData.effectNodeData.length">
        <el-steps
          direction="vertical"
          :active="stepsActive"
          finish-status="success"
          process-status="process"
        >
          <el-step
            v-for="(item, index) in logData.effectNodeData"
            :key="index"
            :title="`${item.levelNode}级审批`"
          >
            <template slot="description">
              <step-item
                :item="ch"
                :level-node="item.levelNode"
                v-for="(ch, chIndex) in item.approveNode"
                :key="chIndex"
              >
              </step-item>
              <copy-item :list="item.copyNode"></copy-item>
            </template>
          </el-step>
        </el-steps>
      </div>
      <!-- 撤销记录 -->
      <div v-if="logData.cancelNodeData && logData.cancelNodeData.length">
        <el-divider content-position="left">
          <el-tag type="warning"> 撤销记录 </el-tag>
        </el-divider>
        <div v-for="(item, index) in logData.cancelNodeData" :key="index">
          <!-- nodeType=4 撤销;nodeType=5 驳回 -->
          <step-item v-if="item.nodeData.nodeType ==='4'" :item="item.nodeData" :key="index"> </step-item>
          <el-steps
            direction="vertical"
            :active="stepsActive"
            finish-status="success"
            process-status="process"
          >
            <el-step
              v-for="(_item, _index) in item.childNodeData"
              :key="_index + 'child'"
              :title="`${_item.levelNode}级审批`"
            >
              <template slot="description">
                <step-item
                  :item="ch"
                  :level-node="_item.levelNode"
                  v-for="(ch, chIndex) in _item.approveNode"
                  :key="chIndex + 'approveNode'"
                >
                </step-item>
                <copy-item :list="_item.copyNode"></copy-item>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
    </zm-form>
  </div>
</template>

<script>
import StepItem from './StepItem'
import CopyItem from './CopyItem'
import approveApi from '@/api/src/approve'
import { PROCESS_TYPE } from '@/model/index'
export default {
  name: 'ApproveRecord',
  components: { StepItem, CopyItem },
  mixins: [],
  props: {
    processType: {
      type: String,
      default: '1'
    },
    businessId: {
      type: String,
      default: '1'
    },
    draftId: {
      type: String,
      default: ''
    },
    isLoadList: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      info: {},
      logData: {
        effectcurrentNode: '1',
        effectNodeData: []
      },
      stepsActive: 0
    }
  },
  computed: {},
  watch: {
    isLoadList (v) {
      this.getApproveLogList()
    }
  },
  mounted () {
    this.getApproveLogList()
  },
  methods: {
    async getApproveLogList () {
      const params = {
        businessId: this.businessId,
        processType: this.processType
      }
      if (this.draftId) {
        params.draftId = this.draftId
      }
      const res = await approveApi.getLogList(params)
      this.info = res.info || {}
      this.logData = res.logData || {}
      console.log(this.logData, 'logData')
      this.stepsActive = +res.logData.effectCurrentNode
    }
  }
}
</script>
